<template>
  <div class="da">
    <!-- 轮播图 -->
    <div class="lun">
      <img class="lun_img" :src="data.list_img">
    </div>

  <!-- 红色部分 -->
  <div class="pin">
    <p class="pin_price">￥{{data.list_pinprice}}</p>
    <p class="pin_qprice">单价买￥{{data.list_price}}</p>
    <p class="pin_num">已拼{{data.list_num}}件</p>
  </div>

  <!-- 名称部分 -->
  <div class="size">
    <p class="size_name">{{data.list_name}}</p>
  </div>

  <!-- 拼团 -->
  <div class="user">
        <div class="user_xiao" :data=tableData v-for="(v,index) in data" :key="index">
            <div class="user_nei">
                <img class="user_img" :src="v.userimg" alt="">
                <p class="user_name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{v.username}}</p>
                <p class="user_num">还差{{v.pin_num}}人成团</p>
                <p class="user_btn">去参团</p>
            </div>

        </div>
    </div>

    <div class="commen">
      <p class="commen_ping">宝贝评价：</p>
      <a href="" class="commen_quan">查看全部</a>
    </div>

    <div class="wen">
      <p class="wen_ping">问大家</p>
      <a href="" class="wen_quan">查看全部</a>
    </div>
    <div class="xiang">
      <p class="xiang_title">商品详情</p>
      <p class="xiang_info">
        {{data.list_info}}
      </p>
           <img class="xiang_img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3316704597,2751225150&fm=26&gp=0.jpg" alt="">

    </div>
      <p class="bottom">已经到底了！！！</p>

    <div>
    </div>
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
  </div>

</template>

<script>
export default {
  data () {
    return {
      tableData: {},
      data: '',
      id: ''
    }
  },

  created () {
    this.getParams()
    this.coupon()
  },

  methods: {
    getParams () {
      var id = this.$route.params.id
      console.log(id)
      var t = this
      this.$axios({
        url: '/info',
        params: {
          id: id
        }
      }).then(function (res) {
        console.log(res)
        t.data = res.data.data
        console.log(t.data)
      })
    },

    coupon () {
      let t = this
      this.$axios({
        url: '/assemble'
      }).then(function (res) {
        t.data = res.data.data
        console.log(t.data)
      })
    }
  }
}
</script>

<style>
.lun_img{
  width: 400px;
  height: 300px;
}
.da{
  width: 400px;
  border: 1px solid rgb(182, 182, 182);
}
.bottom{
  text-align: center;
  color: #b4b4b4;
}
.xiang_img{
  width: 400px;
  height: 200px;
}
.xiang_info{
  font-size: 13px;
  text-align: left;
}
.xiang_title{
  margin-left: 35px;
}
.xiang{
  border-top: 1px solid rgb(189, 189, 189);
  width: 400px;
}
.wen{
  border-top: 1px solid rgb(189, 189, 189);
  width: 400px;
}
.wen_ping{
  margin-left: -325px;
}
.wen_quan{
  margin-right: -290px;
  position: relative;
  top: -40px;
  color: red;
  text-decoration: none;
}
.commen_quan{
  margin-right: -290px;
  position: relative;
  top: -40px;
  color: red;
  text-decoration: none;
}
.commen_ping{
  margin-left: -300px;
}
.commen{
  width: 400px;
}
.user_btn{
        width: 60px;
        font-size: 10px;
        border-radius: 10px;
        border:1px solid red;
        background-color: red;
        color: white;
        margin-left: 315px;
        margin-top: -30px;
        cursor: pointer;

    }
    .user_num{
      width: 80px;
        font-size: 13px;
        margin-top: -33px;
        margin-left: 215px;
    }
    .user_name{
        font-size: 15px;
        padding-top: 30px;
        margin-right: 200px;
    }
    .user_img{
        width: 50px;
        height: 50px;
        border-radius: 100px;
        float: left;
        margin-top: 15px;
        margin-left: 10px;
    }
    .user_xiao{
      width: 400px;
      height: 100px;
    }
    .user{
        width: 400px;
        border-top: 1px solid rgb(189, 189, 189);
        border-bottom: 1px solid rgb(189, 189, 189);
        margin-top: -20px;
        height: 200px;
    }
.size_name{
width: 350px;
text-align: left;
float: left;
margin-left: 10px;
margin-top: -20px;
}
.size{
  width: 400px;
  height: 150px;
  margin-top: -40px;
}
.pin_num{
  float: right;
  margin-left: 25px;
  color: aliceblue;
  font-size: 15px;
  margin-top: 17px;
  margin-right: 10px;
}
.pin_price{
  float: left;
  margin-left: 10px;
  color: aliceblue;
  font-size: 22px;
  font-weight: 600;
  margin-top: 10px;
}
.pin_qprice{
  float: left;
  margin-left: 25px;
  color: aliceblue;
  font-size: 12px;
  margin-top: 17px;
}
.pin{
  width: 400px;
  height: 50px;
  background-color: red;
  position: relative;
  top: -30px;
}
.lun{
  width: 400px;
}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

</style>
